@CenterWidth: 180px;
@CenterPadding: 20px;
@RegionWidth: 60px;
@RegionPadding: 10px;
@RegionDis: 20px;
@BubbleDis: 40px;

.root-container {
  height: 100%;
  position: relative;
  background: radial-gradient(
      22.92% 54.78% at 14.84% 65.09%,
      rgba(0, 101, 250, 0.6) 0,
      rgba(0, 98, 250, 0) 100%
    ),
    radial-gradient(
      61.67% 48.45% at 74.64% 30.87%,
      rgba(0, 101, 250, 0.8) 0,
      rgba(0, 98, 250, 0) 100%
    ),
    #131838;
}

.company-center {
  background-color: #0550c5;
  width: @CenterWidth;
  height: @CenterWidth;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: @CenterPadding;
  color: #ffffff;
  box-sizing: border-box;
  text-align: center;
}
.region {
  width: @RegionWidth;
  height: @RegionWidth;
  background-image: radial-gradient(#ffffff, #436cf1);
  color: #436cf1;
  border-radius: 50%;
  font-size: 14px;
  padding: @RegionPadding;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 40%;
  box-sizing: border-box;
  text-align: center;
  transition: all 100ms linear;
  &:hover {
    background-image: radial-gradient(#436cf1, #ffffff);
    color: #ffffff;
  }
  &.center {
    transform: translate(@CenterWidth * 3, -(@CenterWidth + @RegionDis * 2));
  }
  &.north {
    transform: translate(-50%, -(@CenterWidth / 2 + @RegionWidth + @RegionDis));
  }
  &.south {
    transform: translate(-50%, (@CenterWidth / 2 + @RegionDis));
  }
  &.west {
    transform: translate(
      -(@CenterWidth / 2 + @RegionWidth + @RegionDis * 4),
      -50%
    );
  }
  &.east {
    transform: translate((@CenterWidth / 2 + @RegionDis * 3), -50%);
  }
  &.west-north {
    transform: translate(
      -(@CenterWidth / 2 + @RegionWidth + @RegionDis),
      -(@CenterWidth / 2 + @RegionWidth + @RegionDis)
    );
    &::after {
      content: "";
      display: block;
    }
  }
  &.east-north {
    transform: translate(
      (@CenterWidth / 2 + @RegionDis),
      -(@CenterWidth / 2 + @RegionWidth + @RegionDis)
    );
  }
  &.west-south {
    transform: translate(
      -(@CenterWidth / 2 + @RegionWidth + @RegionDis),
      (@CenterWidth / 2 + @RegionDis)
    );
  }
  &.east-south {
    transform: translate(
      (@CenterWidth / 2 + @RegionDis),
      (@CenterWidth / 2 + @RegionDis)
    );
  }
}
// 内容区域的公共样式
.bubbleContent() {
  padding: 0;
  box-sizing: border-box;
  max-height: 190px;
  max-width: 360px;
  overflow-y: auto;
  overflow-x: visible;
  box-shadow: 0 0 2px rgba(#a4deee, 0.4);
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 14px;
  background-color: #29408f;
}
.company-list-bubble {
  position: absolute;
  top: 50%;
  left: 40%;
  z-index: 0;
  .bubble-center {
    transform: translate(
      (@CenterWidth * 3 + @BubbleDis + @RegionWidth),
      -(@CenterWidth + @RegionDis * 2)
    );
    .bubble-content {
      transform: translate(0, -100%);
      .bubbleContent();
    }
  }
  .bubble-north {
    transform: translate(
      -50%,
      -(@CenterWidth / 2 + @RegionWidth + @RegionDis + @BubbleDis)
    );
    .bubble-content {
      transform: translate(0, -100%);
      .bubbleContent();
    }
  }
  .bubble-south {
    transform: translate(
      -50%,
      (@CenterWidth / 2 + @RegionDis + @RegionWidth + @BubbleDis)
    );
    .bubble-content {
      .bubbleContent();
    }
  }
  .bubble-west {
    transform: translate(
      -(@CenterWidth / 2 + @RegionWidth + @RegionDis + @BubbleDis * 4),
      -50%
    );
    .bubble-content {
      transform: translate(-100%, 0);
      .bubbleContent();
    }
  }
  .bubble-east {
    transform: translate(
      (@CenterWidth / 2 + @RegionDis + @RegionWidth + @BubbleDis * 3),
      -50%
    );
    .bubble-content {
      .bubbleContent();
    }
  }
  .bubble-west-north {
    transform: translate(
      -(@CenterWidth / 2 + @RegionWidth + @RegionDis + @BubbleDis),
      -(@CenterWidth / 2 + @RegionWidth + @RegionDis + @BubbleDis)
    );
    .bubble-content {
      transform: translate(-120%, -30%);
      .bubbleContent();
    }
  }

  .bubble-east-north {
    transform: translate(
      (@CenterWidth / 2 + @RegionDis + @RegionWidth + @BubbleDis),
      -(@CenterWidth / 2 + @RegionWidth + @RegionDis + @BubbleDis)
    );
    .bubble-content {
      transform: translate(20%, -30%);
      .bubbleContent();
    }
  }
  .bubble-west-south {
    transform: translate(
      -(@CenterWidth / 2 + @RegionWidth + @RegionDis + @BubbleDis),
      (@CenterWidth / 2 + @RegionDis + @RegionWidth + @BubbleDis)
    );
    .bubble-content {
      transform: translate(-120%, -30%);
      .bubbleContent();
    }
  }
  .bubble-east-south {
    transform: translate(
      (@CenterWidth / 2 + @RegionDis + @RegionWidth + @BubbleDis),
      (@CenterWidth / 2 + @RegionDis + @RegionWidth + @BubbleDis)
    );
    .bubble-content {
      transform: translate(20%, -30%);
      .bubbleContent();
    }
  }
  .company-item {
    padding: 4px 8px 4px 16px;
    cursor: pointer;
    position: relative;
    color: #ffffff;
    transition: all 100ms linear;
    &.has-children {
      &::before {
        content: "";
        display: block;
        position: absolute;
        left: 6px;
        top: 10px;
        width: 6px;
        height: 6px;
        background-color: #26e7f1;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
    &:hover {
      // background-color: #0d3278;
      color: #29408f;
      background-color: #ffffff;
    }
    & + .company-item {
      border-top: 1px solid #0d3278;
    }
  }
}
.detail-info {
  position: fixed;
  opacity: 1;
  background-color: #303957;
  box-shadow: 0 0 6px rgba(#a4deee, 0.4);
  padding: 10px;
  z-index: 99;
  display: none;
  transform: translateY(-50%);
  .detail-item {
    display: flex;
    align-items: center;
    padding: 4px;
    & + .detail-item {
      border-top: 1px solid #b1c2f9;
    }
  }
  .detail-label {
    display: block;
    width: 90px;
    font-size: 14px;
    color: #f4f4f4;
    text-align: right;
  }
  .detail-value {
    font-size: 14px;
    color: #ffffff;
  }
}
